.product {
  display: grid;
  grid-template-columns: 100px auto 100px 100px;
  grid-template-areas: 'image text price quantity';
  gap: 20px;
  justify-items: left;
}

.img {
  grid-area: image;
  width: 100px;
  height: 100px;
}

.img img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.spec {
  grid-area: text;
  flex-grow: 1;
}

.price {
  grid-area: price;
}

.quantity {
  grid-area: quantity;
  display: flex;
  align-items: center;
  align-content: flex-start;
  gap: 2px 30px;
  flex-wrap: wrap;
}

.quantity,
.spec,
.price,
.width100 {
  width: 100%;
}

.h2 {
  text-align: center;
}
.h5 {
  font-size: 16px;
  margin-bottom: 10px;
}

.contentWrapper {
  padding: 0 15px;
}

.wrapper {
  display: flex;
  gap: 20px;
  font-size: 14px;
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
  flex-direction: column;
  border-radius: 10px;
  box-shadow: 2px 2px 20px 15px hsl(0deg 0% 0% / 12.16%);
  --color: hsla(32, 100%, 50%);
  --hover-buy-bg-color: hsla(32, 100%, 50%, 0.15);
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.footer > div {
  flex-grow: 1;
  text-align: center;
}

.checkout {
  background: green;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

@media (width <= 600px) {
  .product {
    grid-template-columns: 1fr 2fr;
    grid-template-areas: 'image text' 'price quantity';
  }
}
